<template>
	<view>
		<view class="z1">
			<view class="">
				<u-row>
					<u-col span="1.5">
						<text class="xb-text">账号:</text>
					</u-col>
					<u-col span="10">
						<u--input placeholder="" v-model="userinfo.username"></u--input>
					</u-col>
				</u-row>
			</view>
			<view class="">
				<u-row>
					<u-col span="1.5">
						<text class="xb-text">密码:</text>
					</u-col>
					<u-col span="10">
						<u--input placeholder="" :password="true" v-model="password"></u--input>
					</u-col>
				</u-row>
			</view>
			
			<view class="">
				<u-row>
					<u-col span="1.5">
						<text class="xb-text">昵称:</text>
					</u-col>
					<u-col span="10">
						<u--input placeholder="" v-model="userinfo.pickname"></u--input>
					</u-col>
				</u-row>
			</view>

			<view class="row-sex">
				<u-row>
					<u-col span="8"><text>性别:</text></u-col>
					<u-col span="4">
						<u-radio-group  v-model="sexvalue" placement="row"  @change="setSex">
							<u-radio 
								:customStyle="{margin: '8rpx'}"
								v-for="(item, index) in radiolist" 
								:key="index"
								:label="item.name" 
								:name="item.name" 
							>
							</u-radio>
						</u-radio-group>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="buttom-1">
			<u-button text="注册" type="success" @click="zc"></u-button>
		</view>
		<u-notify ref="uNotify" ></u-notify>
	</view>
</template>

<script>
	import md5 from "js-md5"
	export default {
		data() {
			return {
				radiolist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				],
				userinfo: {},
				sexvalue: '男',
				password:'',
				
			}
		},
		methods: {
			setSex(){
				console.log(this.sexvalue);
				this.userinfo.sex=this.sexvalue
			},
			updateSex() {
				this.userinfo.sex = this.sexvalue
			},
			zc() {
				uni.showLoading({
					title: '注册中',
					mask: true
				})
				this.userinfo.password=md5(this.password)
				console.log(this.password);
				uni.$u.http.post('/users', this.userinfo)
					.then(res => {
						if (res.data.code === 200) {
							console.log(res);
							uni.navigateBack(-1)
	
						}else{
							 this.$refs.uNotify.error('账号重复')
						}
						uni.hideLoading();
					})
				
			}
		}
	}
</script>

<style>
	.z1 {
		padding: 20rpx;
		margin-top: 30%;
	}

	.xb {
		margin: 10rpx 0 40rpx 0;

	}

	.xb-text {}

	.xb-x {
		margin-top: 20rpx;
	}
	.z1 view{
		margin: 5rpx 0;
	}
	.row-sex{
		margin: 30rpx 0;
	}
	.buttom-1{
		width: 80%;
		margin: 50rpx auto;
	}
</style>
